<template>
  <div class="login">
    <div class="logo">
      <img
        src="https://img.alicdn.com/tfs/TB1.TVsNUH1gK0jSZSyXXXtlpXa-196-79.svg"
        alt="this is my logo~~"
      />
    </div>
    <!-- 手机号 -->
    <InputGroup
      type="number"
      v-model="phone"
      placeholder="手机号"
      :btnTitle="btnTitle"
      :disabled="disabled"
      :error="errors.phone"
      @btnClick="getVerifyCode"
    />
    <!-- 验证码 -->
    <InputGroup type="number" v-model="verifyCode" placeholder="验证码" :error="errors.code" />
    <div class="login_des">
      <p>
        新用户登录自动注册，表示已同意
        <span>《用户协议》</span>
      </p>
      <div>
        <button :disabled="isClick" class="login_btn" @click="handleloin">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import InputGroup from "./../components/InputGroup.vue";
export default {
  name: "login",
  components: {
    InputGroup
  },
  data() {
    return {
      phone: "",
      verifyCode: "",
      errors: {},
      btnTitle: "获取验证码",
      disabled: false
    };
  },
  computed: {
    isClick() {
      if (!this.phone || !this.verifyCode) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    handleloin() {
      // 取消错误提醒
      this.errors = {};
      // 发送请求
      this.$axios
        .post("/api/posts/sms_back", {
          phone: this.phone,
          code: this.verifyCode
        })
        .then(res => {
          console.log(res);
          // 检验成功 设置登录状态并且跳转到/
          localStorage.setItem("ele_login", true);
          this.$router.push("/");
        })
        .catch(err => {
          console.log(err);
        });
    },
    getVerifyCode() {
      if (this.validatePhone()) {
        // 发送网络请求
        this.$axios
          // 这样子写会涉及到跨域的问题 要去vue.config.js下配置
          // .post("https://ele-interface.herokuapp.com/api/posts/sms_send")
          .post("/api/posts/sms_send", {
            sid: "bb84a0cf07cf55e4a6a9540c2fe400dd",
            token: "144626d23f8c81bfb2d6ce36b255b9a7",
            appid: "a08a060b3aa248b5a0f5a1f9fa71e21a",
            templateid: "557140",
            phone: this.phone
          })
          .then(res => {
            console.log(res);
            this.validateBtn();
          });
      }
    },
    validateBtn() {
      let time = 10;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          this.disabled = false;
        } else {
          // 倒计时
          this.btnTitle = time + "秒后重试";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },
    validatePhone() {
      // 验证手机号码 对于null、undefined、0、“”都会被转为flase
      if (!this.phone) {
        this.errors = {
          phone: "手机号不能为空"
        };
        return false;
      } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
        this.errors = {
          phone: "请填写正确的手机号码"
        };
      } else {
        this.errors = {};
        return true;
      }
      return false;
    }
  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}
.logo {
  width: 180px;
  text-align: center;
}
.login_btn {
  width: 100%;
  background-color: #8bda81;
}
</style>